<template>
  <div class="class_wrap">
    <div class="item_wrap">
      <ul>
        <li v-for=" (item , index) in data" :data-id="item.id" @click="selectItem(item.id)">
          <div>
            <div>
              <div>
                <div>
                  <img width="150" height="150" v-lazy="item.imgpath" alt="">
                </div>
              </div>

            </div>

          </div>
          <p>{{item.names}}</p>
          <span>¥ {{item.price}}元</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import {get_item_list} from 'api/recommend'

  export default {
    props: ['data'],
    data() {
      return {}
    },
    created() {
    },
    mounted() {
    },

    computed: {},
    methods: {
      selectItem(id) {
        this.$emit('selectItem', id)
      }
    },
    components: {}
  }
</script>

<style scoped lang="scss">
  @import "~assets/sass/mixin";

  .class_wrap {
    overflow: hidden;
    padding-left: 8px;
    padding-right: 8px;
    .item_wrap {
      width: 100%;
      margin: 0 auto;
      > ul {
        width: 100%;
        overflow: hidden;
        > li {
          float: left;
          width: 48%;
          margin-top: 10px;
          margin-left: 1%;
          margin-right: 1%;
          position: relative;
          background-color: #fff;
          padding-bottom: 10px;
          > div {
            width: 80%;
            padding-top: 80%;
            margin: 0 auto;
            position: relative;
            >div{
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              overflow: hidden;
              >div{
                display: table;
                width: 100%;
                height: 100%;
                >div{
                  display: table-cell;
                  vertical-align: middle;
                  > img {
                    width: 100%;
                    height: auto;
                  }
                }
              }

            }
          }
          > p {
            text-align: left;
            margin-top: 5px;
            font-size: 13px;
            height: 36px;
            line-height: 17px;
            @include text-ellipsis(2);
            padding-left: 10px;
            padding-right: 10px;
          }
          span {
            color: #00deff;
            font-size: 15px;
          }
        }
      }
    }
  }
</style>
